<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
<link href="${ctx.resource}/css/credit-mall.css" rel="stylesheet">
<title>商品详情</title>
</head>
<body>
	<div class="page-group">
		<div class="page page-current">
			<div class="bar bar-footer">
				<c:if test="${cp.amount.intValue() > 0}">
					<c:if test="${maxExchangeNum > 0}">
						<a href="javascript:void(0);" class="exchange-button">立即兑换</a>
					</c:if>
					<c:if test="${maxExchangeNum <=0 }">
						<a href="javascript:void(0);" class="not-enough exchange-button">积分不够</a>
					</c:if>
				</c:if>
				<c:if test="${cp.amount.intValue() <= 0}">
					<a href="javascript:void(0);" class="not-enough exchange-button">已兑完</a>
				</c:if>
			</div>
			<div class="content">
				<c:if test="${cp.type.coupon}">
					<!-- 这里是虚拟产品的头图 开始 -->
					<div class="product-info">
            <img src="${cloud.prod}/${cp.cover}-qrcode" class="product-cover">
						<div class="virtual-product-info">
							<h3>${cp.name }</h3>
							<p class="no-margin">
								<span>${cp.currentPrice.intValue() }</span> 积分<span class="pull-right" style="font-size: .65rem;">剩余：${cp.amount.intValue()}张</span>
							</p>
						</div>
					</div>
					<!-- 这里是虚拟产品的头图 结束 -->
				</c:if>
				<c:if test="${cp.type.product}">
					<!-- 这里是实体产品的头图 开始 -->
					<div class="product-info ">
            <img src="${cloud.prod}/${cp.cover}-qrcode" class="product-cover">
						<div class="product-info-list">
							<h3 class="product-title">${cp.name }</h3>
							<p class="no-margin">
								<span style="font-size: .95rem; font-weight: bold;">${cp.currentPrice.intValue()}</span><span style="font-size: .7rem;">积分 <span class="original-price">${cp.price.intValue() }</span><span class="pull-right" style="font-size: .65rem;">运费：包邮</span><span class="pull-right" style="font-size: .65rem;">剩余：${cp.amount.intValue()}个&nbsp;&nbsp;&nbsp;&nbsp;</span>
							</p>
						</div>
						<div class="list-block no-margin">
							<a href="${ctx.host}/credit-mall/products/${cp.id}/addresses" class="shipping-address">
								<div class="item-content item-link">
									<c:if test="${not empty userAddress}">
										<div class="item-inner">
											<div class="item-title">
												<span class="delivery">配送至：</span>
												<div class="address">
													<p class="no-margin name">${userAddress.contactName}${userAddress.contactPhone}</p>
													<p class="no-margin">${userAddress.province}${userAddress.city}${userAddress.region}${user.address }</p>
												</div>
											</div>
										</div>
									</c:if>
									<c:if test="${empty userAddress}">
										<div class="item-inner">
                      <div class="item-title" style="padding-left: 0; font-size: .75rem;">添加收货地址</div>
										</div>
									</c:if>
								</div>
							</a>
						</div>
					</div>
					<!-- 这里是实体产品的头图 结束 -->
				</c:if>
				<div class="product-introduction">
          <div class="content-block no-margin" style="padding: 0;">
						<h4>商品简介</h4>
						<p>${cp.summary}</p>
						<h4>兑换流程</h4>
						<p>消费者可以根据自己的积分情况去兑换自己喜欢的商品</p>
						<h4>注意事项</h4>
						<p>积分不可变现 兑换后也不接受退换货</p>
					</div>
				</div>
			</div>

		</div>
	</div>

	<%@ include file="/WEB-INF/include/script.jsp"%>
	<d:resource type="script" root="${ctx.resource}/build" src="js/page/credit/mall/credit-mall-view.js" />
	<script type="text/javascript">
		require([ 'page/credit/mall/credit-mall-view' ], function(page) {
			page.init({
				'maxExchangeNum' : ${maxExchangeNum},
				'addressId' : '${userAddress.id}',
				'creditProductId' : '${cp.id}',
				'productType': '${cp.type.alias}',
				'amount': ${cp.amount.intValue()}
			})
		})
	</script>

</body>
</html>